{% load myfilter %}
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/api/favicon">
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/front/index.css' %}">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    <title>大学生心理健康评估</title>
</head>
<body>
<div id="app">
    <header class="header">
        <h3>大学生心理健康评估</h3>
    </header>
    <main class="main">
        <section class="content">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="问卷说明：">
                                <span>[[ props.row.tips ]]</span>
                            </el-form-item>
                            <el-form-item label="适用群体：">
                                <span>[[ props.row.apply ]]</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="问卷名称">
                </el-table-column>
                <el-table-column
                        prop="tag"
                        label="答题状态"
                        width="100"
                        filter-placement="bottom-end">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.state?'success':'warning'"
                                disable-transitions>[[ scope.row.state?'已测试':'未测试' ]]
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="tag"
                        label="测试时间">
                    <template slot-scope="scope">
                        [[ scope.row.time?scope.row.time:'未测试' ]]
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="to_tests(scope.row.id)">开始答题</el-button>
                        <el-button size="mini" type="danger" :disabled="!scope.row.state"
                                   @click="show_result(scope.row.result)">查看结果
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <aside class="sidebar">
            <el-avatar :size="100" src="{{ head }}"></el-avatar>
            <p>用户名：<span>[[ name ]]</span><i class="el-icon-edit edit_name" @click="edit_name"></i></p>
            <p>邮&nbsp;&nbsp;&nbsp;箱：<span>{{ email }}</span></p>
            <p>性&nbsp;&nbsp;&nbsp;别：
                <el-popconfirm
                        confirm-button-text='男'
                        cancel-button-text='女'
                        cancel-button-type="danger"
                        title="请选择："
                        @confirm="set_sex(true)"
                        @cancel="set_sex(false)">
                    <span slot="reference" style="cursor: pointer">[[ showSex ]]</span>
                </el-popconfirm>
            </p>
            <p>年&nbsp;&nbsp;&nbsp;龄：
                <el-popover
                        placement="right"
                        width="240"
                        trigger="click">
                    <span>修改年龄：</span>
                    <el-input-number size="mini" v-model="age" controls-position="right" :min="1"
                                     :max="120" @change="change_age"></el-input-number>
                    <span slot="reference" style="cursor: pointer">[[ age ]]</span>
                </el-popover>
            </p>
            <div class="btns">
                <el-button size="small" @click="advisory.show = true">心理咨询</el-button>
                <el-upload style="width: 40%"
                           action=""
                           :show-file-list="false"
                           :data="{'action':'head'}"
                           :on-success="upload_head"
                           :on-error="upload_head"
                           :before-upload="beforeAvatarUpload">
                    <el-button size="small">修改头像</el-button>
                </el-upload>
                <el-button size="small" @click="change_pwd">修改密码</el-button>
                <el-button size="small" @click="logout">退出登录</el-button>
            </div>
            <el-timeline class="advisory">
                <el-timeline-item><h3 style="color: #666;">心理咨询记录：</h3></el-timeline-item>
                <el-timeline-item
                        v-for="(item, index) in activities"
                        :key="index"
                        :timestamp="item.date">
                    <div style="color: #666;">内容：<p style="color: #999;font-size: 10px;margin: 10px;">[[
                        item.content ]]</p></div>
                    <div>医生：<span style="color: #999;font-size: 10px;">[[ item.name ]]</span></div>
                </el-timeline-item>
            </el-timeline>
        </aside>
        <transition name="el-fade-in-linear">
            <div class="chart" v-show="result" @click.stop="result = false">
                <div @click.stop.prevent>
                    <div class="chart1" id="chart1"></div>
                    <div class="chart2" id="chart2"></div>
                </div>
            </div>
        </transition>
        <transition name="el-fade-in-linear">
            <div class="chart" v-show="advisory.show" @click.stop="advisory.show = false">
                <div @click.stop.prevent style="height: 500px">
                    <h3 style="text-align: center;margin-bottom: 20px">心理咨询</h3>
                    <el-form label-width="70px" :model="advisory">
                        <el-form-item label="医生" prop="email">
                            <el-select v-model="advisory.doctor" placeholder="请选择" style="width: 100%">
                                <el-option
                                        v-for="item in doctor"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    <el-tooltip class="item" effect="light" :content="item.intro"
                                                placement="left">
                                        <span style="float: left;min-width: 100px;display: flex;align-items: center">
                                            <el-avatar shape="square" :src="item.picture" size="small"
                                                       style="margin-right: 10px;"></el-avatar>
                                            [[ item.name ]]
                                        </span>
                                    </el-tooltip>
                                    <el-tag size="small">[[ item.office ]]</el-tag>
                                    <el-tag size="small" type="danger">[[ item.level ]]</el-tag>
                                    <el-tag size="small" type="info">服务人次：[[ item.serve ]]</el-tag>
                                    <span style="float: right; color: #8492a6; font-size: 13px;min-width: 60px;">评分：[[ item.score ]]</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="真实姓名" prop="email">
                            <el-input v-model="advisory.name"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model="advisory.tel"></el-input>
                        </el-form-item>
                        <el-form-item label="咨询内容">
                            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}"
                                      v-model="advisory.content"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button plain @click="submit_advisory">立即提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </transition>
    </main>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    var vm = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            activities: {{ advisory|safe }},
            doctor:{{ doctor|safe }},
            advisory: {
                show: false,
                name: "",
                tel: "",
                content: "",
                doctor: ''
            },
            name: '{{ name }}',
            age: {{ age }},
            tableData: {{ quizzes|safe }},
            result: false,
            verdict: [],
            sex:{{ sex|sex }},
            option1: {
                title: {
                    text: '{{ title }}'
                },
                tooltip: {},
                radar: {
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 4,
                            padding: [5, 10],
                            fontSize: 16,
                        }
                    },
                    indicator: []
                },
                series: [{
                    name: '{{ title }}',
                    type: 'radar',
                    areaStyle: {},
                    data: [
                        {
                            value: [],
                            name: '{{ title }}'
                        }
                    ]
                }]
            },
            option2: {
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: []
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let htmlStr = ""
                        console.log(vm.verdict[params[0].dataIndex])
                        htmlStr += '<h3 style="line-height: 30px">' + vm.verdict[params[0].dataIndex].title + ' : <span style="font-size: 14px">' + params[0].data + '</span></h3>'
                        htmlStr += '<p style="width: 200px;white-space: normal">' + vm.verdict[params[0].dataIndex].trait + '</p>'
                        return htmlStr
                    }
                },
                series: [{
                    data: [],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            },
        },
        computed: {
            showSex() {
                if (this.sex === null) {
                    return '点击设置'
                } else if (this.sex) {
                    return '男'
                } else {
                    return '女'
                }
            },
        },
        mounted: function () {
            {#初始化图表#}
            this.myChart1 = echarts.init(document.getElementById('chart1'));
            this.myChart2 = echarts.init(document.getElementById('chart2'));
        },
        methods: {
            {#跳转测试界面#}
            to_tests(id) {
                window.location.href = '/tests?id=' + id
            },
            {#显示测试结果#}
            show_result(result) {
                this.result = true
                console.log(result)
                this.option1.title = result.radar.title
                this.option1.series = result.radar.series
                this.option1.radar = result.radar.radar
                this.option2.yAxis = result.bar.yAxis
                this.option2.series = result.bar.radar
                this.verdict = result.bar.verdict
                this.myChart1.setOption(this.option1, true);
                this.myChart2.setOption(this.option2, true);
            },
            {#修改性别#}
            set_sex(sex) {
                this.sex = sex
                let params = new FormData
                params.append('action', 'sex')
                params.append('sex', this.sex)
                axios.post('', params).then(res => {
                    if (res.data.state) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('修改失败！');
                    }
                })
            },
            {#修改年纪#}
            change_age(age) {
                let params = new FormData
                params.append('action', 'age')
                params.append('age', this.age)
                axios.post('', params).then(res => {
                })
            },
            edit_name() {
                this.$prompt('请输入新名称', '修改名称', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: vm.name
                }).then(({value}) => {
                    let params = new FormData
                    params.append('action', 'name')
                    params.append('name', value)
                    axios.post('', params).then(res => {
                        if (res.data.state) {
                            this.name = res.data.name
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '修改失败'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改'
                    });
                });
            },
            {#修改密码#}
            change_pwd() {
                this.$prompt('请输入新密码', '修改密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    if (value) {
                        let params = new FormData
                        params.append('action', 'pwd')
                        params.append('pwd', value)
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '修改失败'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '密码不能为空！'
                        });
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改'
                    });
                });
            },
            {#上传头像#}
            upload_head(state) {
                if (state) {
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    });
                    setTimeout(() => {
                        location.reload()
                    }, 500)
                } else {
                    this.$message({
                        type: 'error',
                        message: '修改失败'
                    });
                }
            },
            {#提交心理咨询#}
            submit_advisory() {
                if (this.advisory.name && this.advisory.tel && this.advisory.content && this.advisory.doctor) {
                    if (/^1[3456789]\d{9}$/.test(this.advisory.tel)) {
                        let params = new FormData
                        params.append('action', 'advisory')
                        params.append('data', JSON.stringify(this.advisory))
                        axios.post('', params).then(res => {
                            if (res.data.state) {
                                this.$message({
                                    type: 'success',
                                    message: '提交成功'
                                });
                                this.advisory.show = false
                                location.reload()
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '提交失败'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '电话号码格式有误！'
                        });
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请填写完整！'
                    });
                }
            },
            {#判读上传头像文件#}
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            {#退出登录#}
            logout() {
                Cookies.remove('uid');
                window.location.href = 'login'
            },
        }
    });
</script>
</body>
</html>
